<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-8xl mx-auto px-4 py-6">
      <!-- 筛选区域 -->
      <div class="bg-white p-4 rounded-lg shadow-sm mb-6">
        <div class="flex flex-wrap gap-4 items-center">
          <el-select v-model="statusFilter"
                     placeholder="订单状态"
                     clearable
                     @change="selectAllOrder"
                     class="w-40 !rounded-button">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="bg-white rounded-lg shadow-sm">
        <el-table :data="foodOrders" style="width: 100%">
          <el-table-column prop="id" label="订单编号" width="180" />
          <el-table-column prop="elderly.ename" label="下单人" width="180" />
          <el-table-column prop="status" label="状态" width="120">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ getStatus(scope.row.status)}}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="下单时间" width="180" />
          <el-table-column prop="date" label="预定时间" width="180" />
          <el-table-column prop="totalAmount" label="金额" width="120">
            <template #default="scope">
              ¥ {{ Number(scope.row.totalAmount).toFixed(2) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button
                  type="primary"
                  link
                  class="!rounded-button whitespace-nowrap"
                  @click="showOrderDetail(scope.row)"
              >
                查看详情
              </el-button>
              <el-button
                  v-if="scope.row.status === 1"
                  type="primary"
                  link
                  class="!rounded-button whitespace-nowrap"
                  @click="handleEdit(scope.row.id)"
              >
                发货
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="flex justify-end p-4">
          <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :total="totalItems"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next"
          />
        </div>
      </div>

      <!-- 订单详情抽屉 -->
      <el-drawer
          v-model="drawerVisible"
          title="订单详情"
          size="50%"
      >
        <div v-if="currentOrder" class="p-4">
          <div class="mb-6">
            <h3 class="text-lg font-medium mb-4">基本信息</h3>
            <div class="grid grid-cols-2 gap-4">
              <div class="text-gray-600">订单编号：<span class="text-gray-900">{{ currentOrder.id }}</span></div>
              <div class="text-gray-600">创建时间：<span class="text-gray-900">{{ currentOrder.createTime }}</span></div>
              <div class="text-gray-600">订单状态：
                <el-tag :type="getStatusType(currentOrder.status)">
                  {{ getStatus(currentOrder.status) }}
                </el-tag>
              </div>
              <div class="text-gray-600">订单金额：<span class="text-gray-900">¥ {{ currentOrder.totalAmount.toFixed(2) }}</span></div>
            </div>
          </div>

          <div class="mb-6">
            <h3 class="text-lg font-medium mb-4">订单明细</h3>
            <el-table :data="currentOrder.orderDetailList" style="width: 100%">
              <el-table-column prop="goods.name" label="项目名称" />
              <el-table-column prop="count" label="数量" width="120" />
              <el-table-column prop="goods.realPrice" label="单价" width="120">
                <template #default="scope">
                  ¥ {{ scope.row.goods.realPrice }}
                </template>
              </el-table-column>
              <el-table-column label="小计" width="120">
                <template #default="scope">
                  ¥ {{ scope.row.totalPrice }}
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </el-drawer>
    </div>
  </div>
</template>

<script lang="js" setup>
import { ref, computed } from 'vue';
import { Search, Refresh } from '@element-plus/icons-vue';
import orderApi from "@/api/admin/orderApi.js";

const dateRange = ref([]);
const statusFilter = ref('');
const searchKeyword = ref('');
const drawerVisible = ref(false);
const currentOrder = ref(null);
const currentPage = ref(1);
const pageSize = ref(10);
const totalItems = ref(100);
const statusOptions = [
  { value: 1, label: '已下单' },
  { value: 2, label: '已发货' },
  { value: 3, label: '待支付' },
  { value: 4, label: '待评论' },
  { value: 5, label: '已取消' }
];

const foodOrders = ref([]);


const getStatusType = (status) => {
  switch (status) {
    case 1:
      return 'warning';
    case 2:
      return 'success';
    case 3:
      return 'warning';
    case 4:
      return 'info';
    case 5:
      return 'info';
    default:
      return '';
  }
};
const getStatus = (status) => {
  switch (status) {
    case 1:
      return '已下单';
    case 2:
      return '已发货';
    case 3:
      return '待支付';
    case 4:
      return '待评论';
    case 5:
      return '已取消';
    default:
      return '';
  }
};

const showOrderDetail = (order) => {
  currentOrder.value = order;
  drawerVisible.value = true;
};

const handleEdit = (id) => {
  orderApi.update({
    id: id,
    status: 2
  }).then(resp => {
    if (resp.code == 10000) {
      selectAllOrder();
    }
  })
  // 处理编辑逻辑
};



// 查询所有餐品订单
const selectAllOrder = () => {
  let filterForm = {
    status: statusFilter.value,
  };
  orderApi.selectByPage(currentPage.value, pageSize.value, filterForm)
      .then(resp => {
        if (resp.code == 10000) {
          foodOrders.value = resp.data.list;
          totalItems.value = resp.data.total;
        }
      })
}
// 查询所有的房间订单
// 查询所有的服务订单
selectAllOrder();
</script>

<style scoped>
.el-input :deep(.el-input__wrapper) {
  border-radius: 20px;
}

.el-select :deep(.el-input__wrapper) {
  border-radius: 20px;
}

.el-date-picker :deep(.el-input__wrapper) {
  border-radius: 20px;
}
</style>

